<template>
  <div class="membership-detail-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>会员空间</h1>
        <p>解锁专属福利，享受尊贵体验</p>
      </div>
    </div>
    
    <!-- 会员卡片 -->
    <div class="membership-card-section">
      <div class="membership-card">
        <div class="card-banner"></div>
        <div class="card-content">
          <div class="user-info">
            <img 
              :src="user?.avatar || 'https://picsum.photos/id/64/100/100'" 
              alt="用户头像" 
              class="user-avatar" 
            />
            <div class="user-details">
              <h2>{{ user?.name || '未登录用户' }}</h2>
              <div class="membership-level-badge">
                <span class="level-text">会员等级</span>
                <span class="level-value">{{ user?.membership?.level || 1 }}</span>
              </div>
            </div>
          </div>
          
          <div class="progress-section">
            <div class="progress-header">
              <span class="current-level">当前等级: {{ user?.membership?.level || 1 }}</span>
              <span class="next-level">下一等级: {{ (user?.membership?.level || 1) + 1 }}</span>
            </div>
            <div class="progress-bar">
              <div 
                class="progress-fill"
                :style="{ width: `${getLevelProgress()}%` }"
              ></div>
            </div>
            <div class="progress-text">
              <span>{{ user?.membership?.points || 0 }}/{{ getNextLevelPoints() }} 积分</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 会员特权 -->
    <div class="privileges-section">
      <h2>会员特权</h2>
      <div class="privileges-grid">
        <div class="privilege-card">
          <div class="privilege-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 6V12L16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>专属折扣</h3>
          <p>会员专享宠物用品9折优惠，每月都有会员日特惠</p>
        </div>
        
        <div class="privilege-card">
          <div class="privilege-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9 11L12 14L22 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>生日礼包</h3>
          <p>会员生日当月可领取专属生日礼包，包含宠物零食和日用品</p>
        </div>
        
        <div class="privilege-card">
          <div class="privilege-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M16 8L8 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8 8L16 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>优先预约</h3>
          <p>会员可优先预约宠物美容、寄养等服务，无需排队等待</p>
        </div>
        
        <div class="privilege-card">
          <div class="privilege-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 8V12L15 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3>积分加速</h3>
          <p>会员购物享受1.5倍积分加速，积分可兑换精美礼品</p>
        </div>
      </div>
    </div>
    
    <!-- 等级系统 -->
    <div class="level-system-section">
      <h2>等级系统</h2>
      <div class="level-system-info">
        <p>会员等级根据您的活跃度和消费金额自动提升，等级越高享受的权益越多</p>
      </div>
      <div class="levels-grid">
        <div 
          class="level-card"
          v-for="level in membershipLevels"
          :key="level.level"
          :class="{ active: level.level === (user?.membership?.level || 1) }"
        >
          <div class="level-number">
            <span>LV{{ level.level }}</span>
          </div>
          <h3>{{ level.name }}</h3>
          <p class="level-requirement">
            {{ level.pointsRequired }} 积分
          </p>
          <ul class="level-benefits">
            <li v-for="benefit in level.benefits" :key="benefit">
              • {{ benefit }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 专属服务 -->
    <div class="services-section">
      <h2>专属服务</h2>
      <div class="services-container">
        <div class="service-card">
          <img :src="serviceImages[0]" alt="宠物美容" class="service-image" />
          <div class="service-content">
            <h3>高级宠物美容</h3>
            <p>专业美容师提供的高级宠物美容服务，让您的爱宠焕然一新</p>
            <div class="service-price">
              <span class="price">¥{{ servicePrices[0] }}</span>
              <span class="original-price">¥{{ servicePrices[0] + 50 }}</span>
            </div>
            <button class="service-button">立即预约</button>
          </div>
        </div>
        
        <div class="service-card reverse">
          <img :src="serviceImages[1]" alt="宠物寄养" class="service-image" />
          <div class="service-content">
            <h3>精品宠物寄养</h3>
            <p>为您的爱宠提供舒适的住宿环境和专业的照顾，让您出行无忧</p>
            <div class="service-price">
              <span class="price">¥{{ servicePrices[1] }}/天</span>
              <span class="original-price">¥{{ servicePrices[1] + 30 }}/天</span>
            </div>
            <button class="service-button">立即预约</button>
          </div>
        </div>
        
        <div class="service-card">
          <img :src="serviceImages[2]" alt="宠物训练" class="service-image" />
          <div class="service-content">
            <h3>个性化宠物训练</h3>
            <p>专业训犬师一对一指导，帮助您的爱宠养成良好习惯</p>
            <div class="service-price">
              <span class="price">¥{{ servicePrices[2] }}/课时</span>
              <span class="original-price">¥{{ servicePrices[2] + 80 }}/课时</span>
            </div>
            <button class="service-button">立即预约</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 常见问题 -->
    <div class="faq-section">
      <h2>常见问题</h2>
      <div class="faq-container">
        <div class="faq-item">
          <button class="faq-question" @click="toggleFaq(0)">
            <span>{{ faqItems[0].question }}</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{ rotate: faqOpen[0] }">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="faq-answer" v-show="faqOpen[0]">
            {{ faqItems[0].answer }}
          </div>
        </div>
        
        <div class="faq-item">
          <button class="faq-question" @click="toggleFaq(1)">
            <span>{{ faqItems[1].question }}</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{ rotate: faqOpen[1] }">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="faq-answer" v-show="faqOpen[1]">
            {{ faqItems[1].answer }}
          </div>
        </div>
        
        <div class="faq-item">
          <button class="faq-question" @click="toggleFaq(2)">
            <span>{{ faqItems[2].question }}</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{ rotate: faqOpen[2] }">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="faq-answer" v-show="faqOpen[2]">
            {{ faqItems[2].answer }}
          </div>
        </div>
        
        <div class="faq-item">
          <button class="faq-question" @click="toggleFaq(3)">
            <span>{{ faqItems[3].question }}</span>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{ rotate: faqOpen[3] }">
              <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div class="faq-answer" v-show="faqOpen[3]">
            {{ faqItems[3].answer }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuth } from '../composables/useAuth.js'

// 获取用户信息
const { user, initializeAuth } = useAuth()

// 初始化用户状态
initializeAuth()

// 会员等级数据
const membershipLevels = [
  {
    level: 1,
    name: '新手会员',
    pointsRequired: 0,
    benefits: ['宠物用品9折', '生日礼包', '积分加速1.2倍']
  },
  {
    level: 2,
    name: '进阶会员',
    pointsRequired: 1000,
    benefits: ['宠物用品8.5折', '生日礼包升级', '积分加速1.5倍', '优先预约']
  },
  {
    level: 3,
    name: '高级会员',
    pointsRequired: 3000,
    benefits: ['宠物用品8折', '专属客服', '积分加速2倍', '优先预约', '免费美容一次']
  },
  {
    level: 4,
    name: '尊享会员',
    pointsRequired: 5000,
    benefits: ['宠物用品7.5折', '专属客服', '积分加速2.5倍', '免费寄养2天', '生日礼包豪华版']
  }
]

// 服务图片和价格
const serviceImages = [
  'https://picsum.photos/id/237/800/500',
  'https://picsum.photos/id/169/800/500',
  'https://picsum.photos/id/1025/800/500'
]

const servicePrices = [188, 128, 228]

// 常见问题
const faqItems = [
  {
    question: '如何成为会员？',
    answer: '注册账号并完成首次购物即可自动成为新手会员。随着您的消费和活跃度提升，会员等级会自动升级。'
  },
  {
    question: '会员积分如何获取和使用？',
    answer: '购物消费可获得积分，1元=1积分。会员可使用积分兑换精美礼品或抵扣部分消费金额。'
  },
  {
    question: '会员等级有效期是多久？',
    answer: '会员等级有效期为一年，每年年底会根据您的积分情况重新计算等级。'
  },
  {
    question: '如何预约专属服务？',
    answer: '在会员空间页面点击对应服务的"立即预约"按钮，选择时间并提交预约信息即可。'
  }
]

// FAQ展开状态
const faqOpen = ref([false, false, false, false])

// 切换FAQ展开/收起
const toggleFaq = (index) => {
  faqOpen.value[index] = !faqOpen.value[index]
}

// 计算等级进度
const getLevelProgress = () => {
  const currentPoints = user.value?.membership?.points || 0
  const currentLevel = user.value?.membership?.level || 1
  const currentLevelPoints = membershipLevels[currentLevel - 1].pointsRequired
  const nextLevelPoints = membershipLevels[currentLevel]?.pointsRequired || currentLevelPoints + 1000
  
  return ((currentPoints - currentLevelPoints) / (nextLevelPoints - currentLevelPoints)) * 100
}

// 获取下一等级所需积分
const getNextLevelPoints = () => {
  const currentLevel = user.value?.membership?.level || 1
  return membershipLevels[currentLevel]?.pointsRequired || membershipLevels[currentLevel - 1].pointsRequired + 1000
}
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #4CAF50;
  --primary-hover: #3d8b40;
  --text-primary: #333;
  --text-secondary: #666;
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --border-color: #e0e0e0;
  --radius: 12px;
  --transition: all 0.3s ease;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 页面容器 */
.membership-detail-container {
  min-height: 100vh;
  background-color: var(--light-gray);
}

/* 页面头部 */
.page-header {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 60px 20px;
  text-align: center;
}

.header-content h1 {
  font-size: 3rem;
  margin-bottom: 15px;
  font-weight: 700;
}

.header-content p {
  font-size: 1.3rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto;
}

/* 会员卡片 */
.membership-card-section {
  max-width: 1200px;
  margin: -50px auto 50px;
  padding: 0 20px;
}

.membership-card {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}

.card-banner {
  height: 80px;
  background: linear-gradient(135deg, var(--primary-color), #3d8b40);
}

.card-content {
  padding: 30px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid var(--white);
  margin-top: -60px;
  margin-right: 30px;
  object-fit: cover;
}

.user-details h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.membership-level-badge {
  display: inline-flex;
  align-items: center;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 600;
}

.level-text {
  margin-right: 8px;
}

.level-value {
  font-size: 1.2rem;
  font-weight: 700;
}

.progress-section {
  margin-top: 20px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: var(--text-secondary);
}

.progress-bar {
  width: 100%;
  height: 10px;
  background-color: var(--light-gray);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.progress-text {
  text-align: right;
  margin-top: 8px;
  color: var(--text-primary);
  font-weight: 600;
}

/* 会员特权 */
.privileges-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.privileges-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--text-primary);
}

.privileges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.privilege-card {
  background-color: var(--white);
  padding: 30px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  transition: var(--transition);
}

.privilege-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.privilege-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(76, 175, 80, 0.1);
  border-radius: 50%;
  color: var(--primary-color);
}

.privilege-icon svg {
  width: 40px;
  height: 40px;
}

.privilege-card h3 {
  font-size: 1.4rem;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.privilege-card p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 等级系统 */
.level-system-section {
  background-color: var(--white);
  padding: 60px 20px;
  margin-bottom: 60px;
}

.level-system-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.level-system-info {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  color: var(--text-secondary);
}

.levels-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
}

.level-card {
  background-color: var(--light-gray);
  padding: 30px;
  border-radius: var(--radius);
  text-align: center;
  transition: var(--transition);
  border: 2px solid transparent;
}

.level-card.active {
  background-color: rgba(76, 175, 80, 0.1);
  border-color: var(--primary-color);
  box-shadow: var(--shadow);
}

.level-number {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 700;
}

.level-card h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.level-requirement {
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 20px;
}

.level-benefits {
  text-align: left;
  padding-left: 10px;
}

.level-benefits li {
  margin-bottom: 8px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* 专属服务 */
.services-section {
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.services-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--text-primary);
}

.services-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.service-card {
  display: flex;
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.service-card.reverse {
  flex-direction: row-reverse;
}

.service-image {
  width: 50%;
  height: 300px;
  object-fit: cover;
}

.service-content {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.service-content h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.service-content p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.service-price {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-right: 15px;
}

.original-price {
  color: #999;
  text-decoration: line-through;
}

.service-button {
  width: 150px;
  padding: 12px 30px;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.service-button:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
}

/* 常见问题 */
.faq-section {
  background-color: var(--white);
  padding: 60px 20px;
}

.faq-section h2 {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--text-primary);
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border-color);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition);
}

.faq-question:hover {
  color: var(--primary-color);
}

.faq-question svg {
  transition: transform 0.3s ease;
  color: var(--primary-color);
}

.faq-question svg.rotate {
  transform: rotate(180deg);
}

.faq-answer {
  padding-bottom: 20px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content h1 {
    font-size: 2.2rem;
  }
  
  .header-content p {
    font-size: 1.1rem;
  }
  
  .membership-card-section {
    margin-top: -30px;
  }
  
  .user-info {
    flex-direction: column;
    text-align: center;
  }
  
  .user-avatar {
    margin: -60px auto 20px;
  }
  
  .privileges-grid {
    grid-template-columns: 1fr;
  }
  
  .levels-grid {
    grid-template-columns: 1fr;
  }
  
  .service-card {
    flex-direction: column;
  }
  
  .service-card.reverse {
    flex-direction: column;
  }
  
  .service-image {
    width: 100%;
    height: 200px;
  }
  
  .service-content {
    width: 100%;
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 40px 15px;
  }
  
  .header-content h1 {
    font-size: 1.8rem;
  }
  
  .card-content {
    padding: 20px;
  }
  
  .privilege-card,
  .level-card {
    padding: 20px;
  }
  
  .level-system-section,
  .services-section,
  .faq-section {
    padding: 40px 15px;
  }
}
</style>